<template>
	<view style="float: left;">
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="财务数据" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="graphBox">
			<text class="title">近七日数据曲线</text>
			<view class="filtrateBox" @click="filtrateTypeShow = !filtrateTypeShow">
				<text>{{filtrateTypeTitle}}</text>
				<image src="../../../static/icons/assetAccount-triangle.png"></image>
			</view>
			<view class="typeBox" v-show="filtrateTypeShow">
				<text
					v-for="(item) in filtrateTypeArray"
					:key="item.type"
					:class="{check: item.type == filtrateTypeActive}"
					@click="typeCheck(item.type)"
				>{{item.label}}</text>
			</view>
			<view class="chartsBox">
				<qiun-data-charts
				  type="line"
				  :opts="opts"
				  :chartData="chartData"
				  :canvas2d='false'
				  canvasId='canvans1'
				  
				/>
			</view>
		</view>
		<view class="statisticsBox">
			<view class="rangeBox">
				<text class="title">数据统计范围</text>
				<view @click="timeCheck">
					<text class="staTime">2023-12-23</text>
					<view class="range"></view>
					<text class="endTime">2023-12-23</text>
					<image class="icon" src="../../../static/icons/assetAccount-triangle.png"></image>
				</view>
			</view>
			<view class="itemBox">
				<text class="title">店铺营业额</text>
				<text class="info">¥0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">平台服务费</text>
				<text class="info">¥0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">平台手续费</text>
				<text class="info">¥0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">店铺应收金额</text>
				<text class="info">¥0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">店铺新增积分</text>
				<text class="info">0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">累计退款</text>
				<text class="info">¥0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">累计退还积分</text>
				<text class="info">0.00</text>
			</view>
			<view class="itemBox">
				<text class="title">累计订单数</text>
				<text class="info">0</text>
			</view>
			<view class="itemBox">
				<text class="title">累计退单数</text>
				<text class="info">0</text>
			</view>
			<view class="itemBox">
				<text class="title">新增粉丝数</text>
				<text class="info">0</text>
			</view>
		</view>
		<view class="exportBox">
			<button @click="goDownloadRecord">导出明细</button>
		</view>
		
		<!--时间选择弹出层-->
		<uni-popup ref="timePopup" background-color="#fff">
			<view class="timePopup">
				<text class="popupTitle">选择日期</text>
				<text class="title">变动时间</text>
				<view class="timeRange">
					<text class="staTime">{{staTime}}</text>
					<view class="range"></view>
					<text class="endTime">{{endTime}}</text>
				</view>
				<view class="customTimeBox">
					<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="customTimeValue" @change="bindChange">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="buttonBox">
					<button class="reset">重置</button>
					<button class="confirm">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		targetEcharts
	} from "@/common/apis/other.js"
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 2025; i <= date.getFullYear()+10; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				years,
				months,
				days,
				year,
				month,
				day,
				indicatorStyle: `height: 40px;`,
				filtrateTypeShow:false,
				filtrateTypeArray:[
					{type:1,label:"营业额"},
					{type:2,label:"应收金额"},
					{type:3,label:"订单数"},
					{type:4,label:"退单数"}
				],
				filtrateTypeActive:1,
				staTime:"2024-12-23",
				endTime:"2025-01-22",
				chartData:{},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FAC858"],
					padding: [20,0,0,0],
					enableScroll: false,
					legend: {
					    show: false  // 关闭图例显示
					},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2
					},
					extra: {
					  line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					  }
					}
				}
			};
		},
		onReady() {
	
		},
		methods: {
			typeCheck(type)
			{
				if(type == this.filtrateTypeActive) return
				this.filtrateTypeActive = type;
				this.filtrateTypeShow = !this.filtrateTypeShow;
			},
			timeCheck(){
				this.$refs.timePopup.open('bottom');
			},
			/**导出明细**/
			goDownloadRecord()
			{
				this.$Router.push({
					path: '/pages/merchant/financialData/downloadRecord'
				})
			}
		},
		onShow() {
			this.chartData = {
			categories: ["01-16","01-17","01-18","01-19","01-20","01-21"],
			series: [
			  {
				name: "营业额(元)",
				data: [35,36,31,33,13,34,34]
			  }
			]
		  }
		},
		computed:{
			filtrateTypeTitle(){
				let TypeTitle = "";
				this.filtrateTypeArray.forEach(item=>{
					if(item.type == this.filtrateTypeActive)
					{
						TypeTitle = item.label;
					}
				})
				return TypeTitle;
			}
		}
	};
</script>

<style lang="scss" scoped>

	.graphBox{
		width: 100%;
		height: 520rpx;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		.title{
			width: calc(70% - 30rpx);
			float: left;
			margin-left: 30rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 31rpx;
			margin-top: 15rpx;
			color: rgb(55, 55, 55);
		}
		.filtrateBox{
			width: auto;
			float: right;
			height: 50rpx;
			display: flex;
			align-items: center;
			margin-top: 15rpx;
			margin-right: 30rpx;
			text{
				font-size: 28rpx;
				float: left;
				margin-right: 8rpx;
				color: rgb(56, 56, 56);
			}
			image{
				width: 25rpx;
				height: 25rpx;
				float: right;
			}
		}
		.typeBox{
			width: 190rpx;
			height: auto;
			background-color: #FFF;
			position: absolute;
			right:30rpx;
			z-index:9;
			float: right;
			top: 260rpx;
			border-radius: 8rpx;
			box-shadow: 0rpx 0rpx 15rpx rgba(0,0,0,0.15);
			text{
				width: 100%;
				height: 55rpx;
				line-height: 55rpx;
				font-size: 24rpx;
				text-align: center;
				float: left;
				color: rgb(53, 53, 53);
			}
			.check{
				color: #ffc000;
			}
		}
		.chartsBox{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 400rpx;
			margin-top: 15rpx;
			position: static!important;
		}
	}
	.statisticsBox{
		width: 100%;
		height: auto;
		float: left;
		margin-top: 20rpx;
		background-color: #fff;
		margin-bottom: 165rpx;
		.rangeBox{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 110rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.title{
				width: 100%;
				height: 40rpx;
				font-size: 31rpx;
				float: left;
				margin-top: 15rpx;
				color: rgb(55, 55, 55);
			}
			.staTime,.endTime{
				width: auto;
				float: left;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				margin-top: 5rpx;
				color: rgb(190,190,190);
			}
			.range{
				width: 20rpx;
				height: 2rpx;
				background-color: rgb(190,190,190);
				margin:0rpx 10rpx;
				margin-top: 24rpx;
				float: left;
			}
			.icon{
				width: 26rpx;
				height: 26rpx;
				float: left;
				margin-top: 13rpx;
				margin-left: 5rpx;
			}
		}
		.itemBox{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			color: rgb(57, 57, 57);
			.title{
				width: auto;
				float: left;
				font-size: 28rpx;
			}
			.info{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
			}
		}
		.itemBox:last-child{
			border-bottom-width: 0rpx;
		}
	}
	.exportBox{
		width: 100%;
		height: 145rpx;
		background-color: #FFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0rpx 0rpx 15rpx rgba(0,0,0,0.05);
		button{
			width:calc(100% - 60rpx);
			height: 85rpx;
			line-height: 85rpx;
			font-size: 34rpx;
			color: #fff;
			font-weight: bold;
			background-color: #ffc000;
			margin-top: 15rpx;
		}
		button::after{
			border-width: 0rpx;
		}
	}
	.timePopup{
		width: 100%;
		height: auto;
		float: left;
		.popupTitle{
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 35rpx;
			font-weight: 450;
			float: left;
			color: rgb(25, 25, 25);
			margin-top: 20rpx;
		}
		.title{
			width: calc(100% - 60rpx);
			height: 40rpx;
			line-height: 40rpx;
			font-size: 31rpx;
			float: left;
			margin-left: 30rpx;
			color: rgb(53, 53, 53);
		}
		.timeRange{
			width: calc(100% - 60rpx);
			height: 80rpx;
			float: left;
			margin-left: 30rpx;
			margin-top: 15rpx;
			.staTime,.endTime{
				width: calc(45% - 4rpx);
				float: left;
				height: 78rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				background-color: #f5f5f5;
				color: rgb(151, 151, 151);
				border:1rpx solid #f5f5f5;
			}
			.range{
				width: 5%;
				float: left;
				height: 4rpx;
				margin:0rpx 2.5%;
				margin-top: 38rpx;
				background-color: rgb(155, 155, 155);
			}
		}
		.customTimeBox{
			width: calc(100% - 60rpx);
			height: 390rpx;
			float: left;
			margin-left: 30rpx;
			margin-top: 15rpx;
			.picker-view{
				width: 100%;
				height: 100%;
				float: left;
				.item{
					text-align: center; 
					line-height: 40px;
				}
			}
		}
		.buttonBox{
			width: calc(100% - 60rpx);
			height: 85rpx;
			float: left;
			margin-left: 30rpx;
			margin-top: 15rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			.reset,.confirm{
				width: 100%;
				height: 100%;
				font-size: 34rpx;
				border-radius: 0rpx;
				line-height: 85rpx;
			}
			.reset::after,.confirm::after{
				border-width: 0rpx;
			}
			.reset{
				background-color: #fce3ba;
				border-radius: 85rpx 0rpx 0rpx 85rpx;
				color: #6e6e6e;
			}
			.confirm{
				background-color: #f8a839;
				border-radius: 0rpx 85rpx 85rpx 0rpx;
				color: #fff;
			}
		}
	}
</style>